<template>
  <div class="killBox" v-if="seckillList.length > 0">
    <div :style="{backgroundColor: config.backgroundColor}">
      <div class="timeBox">
        <div class="leftBox">{{config.title}}</div>
        <div
          @click="$router.push('/pages/activity/GoodsSeckill/main')"
          class="more"
        >
          更多
          <span class="iconfont icon-jiantou" style="color:black!important"></span>
        </div>
      </div>
      <div class="killGoods">
        <div class="detail" v-for="(item,index) in seckillList" :key="index">
          <image :src="item.image" @click="goDetail(item.id)"/>
          <!-- <image :src="item.image" /> -->
          <div class="title font16">{{item.title}}</div>
          <div class="priceBox">
            <div class="bulk-price ">￥{{item.price}}</div>
            <div class="bulk-origi font13">￥{{item.otPrice}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSeckillConfig, getSeckillList } from "@/api/activity";
export default {
  name: "seckill-list",
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      seckillList: [],//秒杀列表
      timing:'',//当前秒杀时间
      timestop:'',//秒杀剩余时间
    };
  },
  mounted() {
    // console.log("seckill.config", this.config)
    this.getData();
    this.getSeckillConfig();
  },
  methods: {
    //跳转详情页
    goDetail: function(id) {
      var time = this.timestop;
      this.$router.push({
        path: "/pages/activity/SeckillDetails/main",
        query: { id, time }
      });
    },
    //获取正在秒杀的时间
    getSeckillConfig(){
      getSeckillConfig().then(res => {
        this.timeList = res.data.seckillTime;
        for(var i in this.timeList){
          if(this.timeList[i].status==1){
            this.timing = this.timeList[i].id
            this.timestop = this.timeList[i].stop
            // console.log(this.timing)
          }
        }
      })
    },
    //获取秒杀列表
    getData() {
      let param = { limit: this.config.count, endTime: Math.ceil(new Date().getTime() / 1000) };
      if (this.config.source == "auto") {
      } else {
        param.idArray = this.config.ids;
      }
      getSeckillList(this.timing, param).then(res => {
        if (res.status == 200) {
          this.seckillList = res.data;
          // console.log("获取的秒杀列表",res.data)
        }
      });
    }
  },
  computed: {
  }
};
</script>

<style scoped>
.more{
  font-size: 26rpx;
  color: #999999
}
.killBox {
  margin-top:5rpx;
  padding: 0 30rpx;
  background: #ffffff
}
.killBox .timeBox {
  justify-content: space-between;
  display: flex;
  align-items: center;
  padding:10px 0;
}
.killBox .timeBox span {
  color: #999999;
}
.killBox .timeBox .leftBox {
  display: flex;
  align-items: center;
  font-size: 36rpx;
  color: #333333;
  font-weight: bold;
}

.killBox .timeBox .leftBox span {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #4e3e3a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  font-weight: 400 !important;
}
.killBox .timeBox .leftBox image {
  width: 108px;
  height: 29px;
}

.killBox .timeBox .leftBox .countBox {
  display: flex;
  align-items: center;
  margin: 0 4px;
  font-weight: bold;
}

.killBox .killGoods {
  display: flex;
  /* padding: 0 2%; */
  /* padding-top: 6px; */
  width: 96%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.killBox .killGoods .detail {
  margin: 1% 1% 1% 0;
  background: #ffffff;
  width:32%;
}
.killBox .killGoods .detail image {
  width: 100%;
  height: 110px;
}

.killBox .killGoods .detail .title {
  font-size:28rpx;
  width: 100px;
  color: #333333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  margin-top: 6px;
  padding-left: 2px;
  font-weight: bold;
}

.killBox .killGoods .detail .priceBox {
  display: -webkit-box;
  align-items: center;
  margin-top: 6px;
  padding-left: 2px;
  padding-bottom: 4px;
}
.killBox .killGoods .detail .bulk-price {
  font-weight: bold;
  font-size:36rpx;
  color:#ff563d;
}
.killBox .killGoods .detail .bulk-origi {
  text-decoration: line-through;
  color: #999999;
  padding-left: 8px;
  padding-top: 3px;
}

.colorRed {
  color: #f85353;
}
.font16 {
  font-size: 16px;
}
.font14 {
  font-size: 14px;
}
.font13 {
  font-size: 13px;
}
.flex {
  display: flex;
}
</style>
